<!--
 * @Description: 函数作用说明
 * @Author: zdq
 * @Date: 2024-10-31 23:53:16
 * @LastEditTime: 2024-11-01 00:07:40
 * @LastEditors: zdq
 * @Reference: 
-->
<script setup lang="ts">
  import { ref } from 'vue'

  const emits = defineEmits<{
    (e: 'changeStatus', value: number | ''): void
  }>()

  // 当前选中的标签
  const activeName = ref<'' | number>('')

  // 标签选项卡
  const tabPanes: Array<{ name: number | ''; txt: string }> = [
    { name: '', txt: '全部入库单' },
    { name: 0, txt: '待退回' },
    { name: 1, txt: '在途中' },
    { name: 2, txt: '已退回总部' },
  ]
  // 导航切换
  const tabClick = () => {
    emits('changeStatus', activeName.value)
  }
</script>

<template>
  <div class="content">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabClick">
      <el-tab-pane v-for="item in tabPanes" :key="item.txt" :name="item.name">
        <template #label>
          <span>{{ item.txt }}</span>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
  .content {
    width: 100%;
    height: fit-content;
    background: #ffffff;
    padding: 0 12px;
    box-sizing: border-box;
  }
  .demo-tabs {
    :deep(.el-tabs__header) {
      margin: 0 0 8px !important;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }

  .demo-tabs-child {
    &.el-tabs {
      --el-tabs-header-height: 26px;
    }

    :deep(.el-tabs__header) {
      margin: 0 0 2px;

      .el-tabs__nav-wrap {
        .el-tabs__nav {
          .el-tabs__item {
            padding: 0 10px;
            font-size: 12px;
          }

          .el-tabs__item.is-top:nth-child(2) {
            padding-left: 0;
          }
        }

        &::after {
          display: none;
        }
      }
    }

    :deep(.el-tabs__nav-wrap::after) {
      height: 1px;
    }
  }
</style>
